<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" placeholder="请输入1-100的数字">
    <input type="button" value="猜一猜" v-on:click="f()">
    <p></p>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let x = parseInt(Math.random()*(100))+1;
        let count = 0;
        let v = new Vue({
            el:"body>div",
            data:{},
            methods:{
                f(){
                    count++;

                    let i = document.querySelector("input");
                    let d = document.querySelector("p");
                    if (i.value<x){
                        d.innerText="猜小了";
                    }
                    else if (i.value>x){
                        d.innerText="猜大了";
                    }
                    else if (i.value==x){
                        d.innerText="猜对了,一共猜了"+count+"次";
                    }
                }
            }
        })

    </script>
</div>

</body>
</html>